<template>
  <div class="render_dynamic_table">
    <button class="m-l-5" type="primary" @click="exportExcel" :disabled="exportCurrentLoading">导出</button>
    <vxe-grid 
    ref="xTable" 
    :show-header="false"
    :loading="loading"
    v-bind="gridOptions" 
    :cell-style="cellStyle"
    :merge-cells="gridOptions && gridOptions.mergeCells">
    </vxe-grid>
  </div>
</template>

<script>
import configDynamicTable from './config'
export default {
  data() {
    return {
      filename: '',
      exportCurrentLoading: false,
      loading: false,
      gridOptions: {
        exportConfig: {
          fileName: '',
          sheetName: 'Sheet1',
          types: ['xlsx'],
          mode: 'current',
          modes: ['current'],
          isMerge: true,
          useStyle: true,
          isHeader: false,
          data: [],
        },
        data: [],
        columns: [],
        mergeCells: []
      }
    }
  },
  created() {
    // 表1
    // this.caizhengRender()
    // 表2
    this.yusuanRender()
  },
  methods: {
    getIndex(ary, id, attr) { // 获取开始的 row
      let rowIndex = 0
      ary.forEach(i => {
        if (i[id] == attr) rowIndex = i.row
      })
      return rowIndex
    },
    cellStyle({ row, rowIndex, column }) {
      if (row.a && row.a.length > 50) {
        return {
          textAlign: 'left'
        }
      }
    },
    async exportExcel() { // 当前页导出
      this.exportCurrentLoading = true
      
      this.exportCurrentLoading = false
      
      this.$refs.xTable.$refs.xTable.initStore.export = false // 需手动改为false，否则导出的是上一次选中数据
      this.$refs.xTable.openExport({
        filename: this.filename,
        modes: ['current'],
        data: this.gridOptions.data,
      })
    },
    yusuanRender() { // 预算表
      this.filename = '市级预算项目支出绩效自评表（ 2021 年度）'
      const chList = [ // 产出指标
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
      ]
      const xyList = [ // 效益指标
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
      ]
      const mydList = [ // 满意度指标
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
        { c: '12', d: '32', e: '11', f: '22', g: '112', h: '99', i: '89'},
      ]
      // 年度绩效指标
      let jdjhMergeIndex = this.getIndex(configDynamicTable.YUSUAN.mergeCells, 'id', 'startDynamic') + 1,
          _ndMerge = [],
          _ndData = []
      console.log('jdjhMergeIndex: ', jdjhMergeIndex);
      const ndAllLength = chList.length + xyList.length + mydList.length
      _ndMerge.push({ row: jdjhMergeIndex, col: 0, rowspan: ndAllLength + 1, colspan: 0 })
      _ndMerge.push({ row: jdjhMergeIndex + 1, col: 1, rowspan: chList.length, colspan: 0 })
      _ndMerge.push({ row: jdjhMergeIndex + 1 + chList.length, col: 1, rowspan: xyList.length, colspan: 0 })
      _ndMerge.push({ row: jdjhMergeIndex + 1 + chList.length + xyList.length, col: 1, rowspan: mydList.length, colspan: 0 })

      chList.forEach(item => {
        _ndData.push({ a: '年度绩效指标' , b: '产出指标（50分）', c: item.c, d: item.d, e: item.e, f: item.f, g: item.g, h: item.h, i: item.i })
      })
      xyList.forEach(item => {
        _ndData.push({ a: '年度绩效指标' , b: '效益指标（30分）', c: item.c, d: item.d, e: item.e, f: item.f, g: item.g, h: item.h, i: item.i})
      })
      mydList.forEach(item => {
        _ndData.push({ a: '年度绩效指标' , b: '满意度指标（10分）', c: item.c, d: item.d, e: item.e, f: item.f, g: item.g, h: item.h, i: item.i})
      })
      jdjhMergeIndex = jdjhMergeIndex + ndAllLength + 1

      // 底部固定内容
      const foot = {
        data: [
          { a: '总分', d: '系统取值' },
          { a: '总分在80分以下的项目未实现绩效目标的原因分析及拟采取的措施说明：', d: '系统取值'},
          // { a: '' },
          // { a: '    注：1.得分一档最高不能超过该指标分值上限。' },
          // { a: '    2.定性指标根据指标完成情况分为：完成预期指标、部分完成预期指标并具有一定效果、未完成预期指标且效果较差三档，分别按照该指标对应分值区间100-80%(含)、80-60%(含)、60-0%合理确定分值。' },
          // { a: '    3.定量指标若为正向指标（即指标值为≥*），则得分计算方法应用全年实际值（B）/年度指标值（A）*该指标分值；若定量指标为反向指标（即指标值为≤*），则得分计算方法应用年度指标值（A）/全年实际值（B）*该指标分值。' },
          // { a: '    4.请在“未完成原因分析”中说明偏离目标、不能完成目标的原因。' },
          { a: `
            注：
            1.得分一档最高不能超过该指标分值上限。
            2.定性指标根据指标完成情况分为：完成预期指标、部分完成预期指标并具有一定效果、未完成预期指标且效果较差三档，分别按照该指标对应分值区间100-80%(含)、80-60%(含)、60-0%合理确定分值。
            3.定量指标若为正向指标（即指标值为≥*），则得分计算方法应用全年实际值（B）/年度指标值（A）*该指标分值；若定量指标为反向指标（即指标值为≤*），则得分计算方法应用年度指标值（A）/全年实际值（B）*该指标分值。
            4.请在“未完成原因分析”中说明偏离目标、不能完成目标的原因。
            5.自评得分在80分以下的，要简要说明绩效目标未实现的原因和下一步拟采取的具体措施。
          ` }
        ],
        merge: [
          { row: jdjhMergeIndex, col: 0, rowspan: 0, colspan: 3 },
          { row: jdjhMergeIndex, col: 3, rowspan: 0, colspan: 6 },
          { row: jdjhMergeIndex + 1, col: 0, rowspan: 0, colspan: 3 },
          { row: jdjhMergeIndex + 1, col: 3, rowspan: 0, colspan: 6 },
          { row: jdjhMergeIndex + 2, col: 0, rowspan: 0, colspan: 9 },
          { row: jdjhMergeIndex + 3, col: 0, rowspan: 0, colspan: 9 },
          { row: jdjhMergeIndex + 4, col: 0, rowspan: 0, colspan: 9 },
          { row: jdjhMergeIndex + 5, col: 0, rowspan: 0, colspan: 9 },
          { row: jdjhMergeIndex + 6, col: 0, rowspan: 0, colspan: 9 },
          { row: jdjhMergeIndex + 7, col: 0, rowspan: 0, colspan: 9 },
        ]
      }

      // 数据渲染
      this.gridOptions.data = [...configDynamicTable.YUSUAN.tableData, ..._ndData, ...foot.data]
      this.gridOptions.mergeCells = [...configDynamicTable.YUSUAN.mergeCells, ..._ndMerge, ...foot.merge]
      this.gridOptions.columns = configDynamicTable.YUSUAN.columns

    },
    caizhengRender() { // 财政支出表
      this.filename = '财政支出项目绩效目标申报表（填报参考）'
      const jdjhList = [ // 项目实施进度计划数据
        { b: '计划1', e: '2011-11-11', f: '2022-10-10' },
        { b: '计划1', e: '2011-11-11', f: '2022-10-10' },
        { b: '计划1', e: '2011-11-11', f: '2022-10-10' },
        { b: '计划1', e: '2011-11-11', f: '2022-10-10' },
        { b: '计划1', e: '2011-11-11', f: '2022-10-10' },
        { b: '计划1', e: '2011-11-11', f: '2022-10-10' },
      ]
      const cqjxCHList = [ // 长期绩效指标数据 - 产出
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
      ]
      const cqjxXYList = [ // 长期绩效指标数据 - 效益
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
      ]
      const ndCHList = [ // 年度绩效指标数据 - 产出
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
      ]
      const ndXYList = [ // 年度绩效指标数据 - 效益
        { c: '12', d: '32', e: '1100000', f: '22'},
        { c: '12', d: '32', e: '1100000', f: '22'},
        { c: '12', d: '32', e: '1100000', f: '22'},
        { c: '12', d: '32', e: '1100000', f: '22'},
        { c: '12', d: '32', e: '1100000', f: '22'},
        { c: '12', d: '32', e: '1100000', f: '22'},
      ]
      const ndDZList = [ // 年度绩效指标数据 - 电子
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '12', d: '32', e: '11', f: '22'},
        { c: '2222212', d: '32', e: '11', f: '22'},
      ]


      // 项目实施进度计划
      let jdjhMergeIndex = this.getIndex(configDynamicTable.CAIZHENG.mergeCells, 'id', 'startDynamic') + 1,
          _jdjhMerge = [],
          _jdjhData = []

      _jdjhMerge.push({ id: 'jdjh', row: jdjhMergeIndex, col: 0, rowspan: jdjhList.length + 1, colspan: 0 })
      _jdjhMerge.push({ id: 'jdjh', row: jdjhMergeIndex, col: 1, rowspan: 0, colspan: 3 })
      jdjhList.forEach(item => {
        ++jdjhMergeIndex
        _jdjhMerge.push({ id: 'jdjh', row: jdjhMergeIndex, col: 1, rowspan: 0, colspan: 3 })
        _jdjhData.push({ id: 'jdjh', a: '项目实施进度计划' , b: item.b, e: item.e, f: item.f})
      })

      // 项目绩效目标  - 固定
      const xmjx = {
        merge: [
          { row: jdjhMergeIndex + 1, col: 0, rowspan: 2, colspan: 0 },
          { row: jdjhMergeIndex + 1, col: 1, rowspan: 0, colspan: 2 },
          { row: jdjhMergeIndex + 1, col: 3, rowspan: 0, colspan: 3 },
          { row: jdjhMergeIndex + 2, col: 3, rowspan: 0, colspan: 3 },
          { row: jdjhMergeIndex + 2, col: 1, rowspan: 0, colspan: 2 },
        ],
        data: [
          { a: '项目绩效目标' , b: '长期目标', c: '', d: '年度目标', e: '', f: ''},
          { a: '项目绩效目标' , b: '系统取值', c: '', d: '系统取值', e: '', f: ''},
        ]
      }
      jdjhMergeIndex = jdjhMergeIndex + 3

      // 长期绩效
      let _cqjxMerge = [],
          _cqjxData = []
      const cqjxAllLength = cqjxCHList.length + cqjxXYList.length
      _cqjxMerge.push({ row: jdjhMergeIndex, col: 0, rowspan: cqjxAllLength + 1, colspan: 0 })
      _cqjxMerge.push({ row: jdjhMergeIndex + 1, col: 1, rowspan: cqjxCHList.length, colspan: 0 })
      _cqjxMerge.push({ row: jdjhMergeIndex + 1 + cqjxCHList.length, col: 1, rowspan: cqjxXYList.length, colspan: 0 })
      _cqjxData.push({ a: '长期绩效指标' , b: '一级指标', c: '二级指标', d: '指标内容', e: '指标值', f: '备注'})
      
      cqjxCHList.forEach(item => {
        _cqjxData.push({ a: '长期绩效指标' , b: '产出指标', c: item.c, d: item.d, e: item.e, f: item.f})
      })
      cqjxXYList.forEach(item => {
        _cqjxData.push({ a: '长期绩效指标' , b: '效益指标', c: item.c, d: item.d, e: item.e, f: item.f})
      })
      jdjhMergeIndex = jdjhMergeIndex + cqjxAllLength + 1

      // 年度绩效
      let _ndMerge = [],
          _ndData = []
      const ndAllLength = ndCHList.length + ndXYList.length + ndDZList.length
      _ndMerge.push({ row: jdjhMergeIndex, col: 0, rowspan: ndAllLength + 1, colspan: 0 })
      _ndMerge.push({ row: jdjhMergeIndex + 1, col: 1, rowspan: ndCHList.length, colspan: 0 })
      _ndMerge.push({ row: jdjhMergeIndex + 1 + ndCHList.length, col: 1, rowspan: ndXYList.length, colspan: 0 })
      _ndMerge.push({ row: jdjhMergeIndex + 1 + ndCHList.length + ndXYList.length, col: 1, rowspan: ndDZList.length, colspan: 0 })
      _ndData.push({ a: '年度绩效指标' , b: '一级指标', c: '二级指标', d: '指标内容', e: '指标值', f: '备注'})

      ndCHList.forEach(item => {
        _ndData.push({ a: '年度绩效指标' , b: '产出指标', c: item.c, d: item.d, e: item.e, f: item.f})
      })
      ndXYList.forEach(item => {
        _ndData.push({ a: '年度绩效指标' , b: '效益指标', c: item.c, d: item.d, e: item.e, f: item.f})
      })
      ndDZList.forEach(item => {
        _ndData.push({ a: '年度绩效指标' , b: '电子版可单独设立设置满意度指标', c: item.c, d: item.d, e: item.e, f: item.f})
      })
      jdjhMergeIndex = jdjhMergeIndex + ndAllLength + 1

      // 底部固定内容
      const foot = {
        data: [
          { a: '其他需说明的问题', b: '系统取值' },
          { a: '预算部门审核意见', f: '（盖章）年 月 日' },
          { a: '填报人' },
          { a: '备注：以上应填内容包括但不限于所列示的提示性参考信息，请根据项目支出具体情况进一步丰富、细化、量化各项内容。' }
        ],
        merge: [
          { row: jdjhMergeIndex, col: 1, rowspan: 0, colspan: 5 },
          { row: jdjhMergeIndex + 1, col: 1, rowspan: 0, colspan: 4 },
          { row: jdjhMergeIndex + 2, col: 1, rowspan: 0, colspan: 5 },
          { row: jdjhMergeIndex + 3, col: 0, rowspan: 0, colspan: 6 },
        ]
      }

      // 数据渲染
      this.gridOptions.data = [...configDynamicTable.CAIZHENG.tableData, ..._jdjhData, ...xmjx.data, ..._cqjxData, ..._ndData, ...foot.data]
      this.gridOptions.mergeCells = [...configDynamicTable.CAIZHENG.mergeCells, ..._jdjhMerge, ...xmjx.merge, ..._cqjxMerge, ..._ndMerge, ...foot.merge]
      this.gridOptions.columns = configDynamicTable.CAIZHENG.columns

      // 对象类型数据填充
      this.gridOptions.data[5].b = '2011-09-12'
    }
  }
}
</script>
<style lang="less">
.render_dynamic_table{
  // 隐藏掉部分导出条件
  .vxe-export--panel{
    table{
      tbody{
        tr:nth-child(5){
          display: none !important;
        }
        tr:nth-child(6){
          display: none !important;
        }
      }
    }
  }
}
</style>
